<template>
  <div class="imglist">
    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll" >
                <div class="mui-control-myitem" @click="to_type('全部')">全部</div>
                <div class="mui-control-myitem" v-for="item in typelist" :key="item.id" @click="to_type(item.type)">{{item.type}}</div>
            </div>
        </div>
    </div>
    <ul>
        <transition-group>
            <router-link :to = "'/HEADER/IMGINFO/'+item.id" v-for="item in infolist" :key="item.id" tag="li">
                <img v-lazy="'http://localhost:3000/news/images/'+item.img[0].name">
                <div class="info">{{item.title}}</div>
            </router-link>
        </transition-group>
    </ul>
  </div>
</template> 
<script>
import mui from "../../lib/js/mui.min.js"
export default {
    data(){
        return{
            typelist:[],
            infolist:[]
        }
    },
    created(){
        this.gettypelist();
        this.to_type('全部');
    },
    mounted(){
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005
        });
    },
    methods:{
        gettypelist(){
            this.$http.get('http://localhost:3000/getimglisttype').then((result)=>{
                this.typelist = result.body;
            })
        },
        to_type(type){
           this.$http.get(`GetImgListByType/${type}`).then((result)=>{
               let obj = result.body;
               if(obj.status == 0){
                   var arr = obj.result;
                   this.infolist = arr.map((item)=>{
                       item.img = JSON.parse(item.img);
                       return item;
                   })
               }
           })
        }
    }
}
</script>

<style lang = 'less' scoped>
    *{
		touch-action: pan-y;
    }
    .imglist{
        .v-enter-active,.v-leave-active{
            transition: all 0.8s ease-in-out;
        }
        .v-enter{
            transform: translateX(100%);
		    opacity: 0;
        }
        .v-leave-to{
            transform: translateX(-100%);
            position: absolute;
		    opacity: 0;
        }
        .mui-segmented-control.mui-scroll-wrapper {
            height: 28px;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
            height: 28px;
            >div{
                font-size: 14px;
                line-height: 28px;
                transition: all 0.5s ease-in-out;
                &:hover{
                    background-color: rgba(0,0,0,0.3);
                    color: white;
                }
            }
        }
        >ul{
            padding: 0px 8px;
            li{
                list-style: none;
                margin-bottom: 5px;
                max-height: 175px;
                position: relative;
                overflow: hidden;
                border-radius: 5px;
                >img{
                    display: block;
                }
                >div{
                    width: 100%;
                    background-color: rgba(0,0,0,0.5);
                    color: white;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    font-size: 12px;
                    padding: 4px 8px;
                }
            }
        }
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-myitem {
			color: inherit;
			border: 0;
		}
		.mui-segmented-control.mui-scroll-wrapper .mui-control-myitem {
			display: inline-block;
			width: auto;
			padding: 0 20px;
			border: 0;
		}
		.mui-segmented-control .mui-control-myitem {
			line-height: 38px;
			display: table-cell;
			overflow: hidden;
			width: 1%;
			-webkit-transition: background-color .1s linear;
			transition: background-color .1s linear;
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #007aff;
			border-color: #007aff;
			border-left: 1px solid #007aff;
		}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-myitem.mui-active {
			border-bottom: 0;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-myitem.mui-active {
			color: #007aff;
			border-bottom: 2px solid #007aff;
			background: 0 0;
		}
		.mui-segmented-control .mui-control-myitem.mui-active {
			color: #fff;
			background-color: #007aff;
		}
    }
</style>